<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <script src="/libs/requirejs/require.min.js" data-main="/js/cart"></script>
	</head>
	<body>
		<div class="r-top">
			<div class="r-mid">
				<a href="../index.html"><img src="../img/tbw.png" alt=""></a>
				<span>购物车</span>
			</div>
		</div>

		<table border="1">
		  <thead>
			<tr>
				<th> <input type="checkbox"> 全选</th>
			  <th>商品图片</th>
			  <th>商品标题</th>
			  <th>商品价格</th>
			  <th>选购数量</th>
			  <th>小计</th>
			  <th>操作</th>
			</tr>
		  </thead>
		  <tbody class="cart-body">
		  </tbody>
		  <tfoot>
			<tr>
			  <td colspan="5">合计</td>
			  <td colspan="2" class="total">0.00</td>
			</tr>
		  </tfoot>
		</table>
	  
		<!-- 定义购物车中商品行的模板 -->
		<script type="text/html" id="cart-template">
		  {{if cart.length === 0}}
			<tr>
			  <td colspan="7">购物车为空，请<a href="/">选购商品</a></td>
			</tr>
		  {{else}}
			{{each cart}}
			<tr data-id="{{$value.id}}">
				<td><input type="checkbox"></td>
			  <td><img src="{{$value.img}}" style="width: 64px; height: 64px;"></td>
			  <td>{{$value.title}}</td>
			  <td>{{$value.price}}</td>
			  <td>
				<button class="minus">-</button>
				<span class="amount">{{$value.amount}}</span>
				<button class="plus">+</button>
			  </td>
			  <td class="sub">{{$value.price * $value.amount}}</td>
			  <td><button class="del">删除</button></td>
			</tr>
			{{/each}}
		  {{/if}}
		</script>
	</body>
</html>
